import React from 'react';
import { message, Row, Col, Form } from 'antd';
import { SimpleQuarterC, FirstHeaderC, SecondHeaderC } from '../../components';

class SimpleQuarterCDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: null,
    };
    this.formRef = React.createRef();
  }

  componentDidMount() {
    this.setState({
      formData: this.formRef.current,
    });
  }

  render() {
    return (
      <Form ref={this.formRef}>
        <Row style={{ padding: '20px' }}>
          <FirstHeaderC title='时间选择组件，支持季度选择' />
          <Col span={16}>
            <SecondHeaderC title='年份选择需早于2022年' />
            <SimpleQuarterC
              form={this.formRef.current}
              // form={this.formRef}
              dataIndex='select1' // Form识别的Item ID
              yearKey='year1'
              // form={this.props.form} // form对象
              quarterKey='quarter1'
              title='报告时间'
              highCurrentDate={false}
              onQuarterChange={(data) => {
                console.log(data);
              }}
              initialValueQuarter={'3'}
            />
          </Col>
          <Col span={16}>
            <SecondHeaderC title='lackDate-判断日期是否完整，true-缺少，false-完整' />
            <SimpleQuarterC
              form={this.formRef.current}
              // form={this.state.formData}
              // form={this.formRef}
              // form={this.props.form} // form对象
              dataIndex='select2' // Form识别的Item ID
              yearKey='year2'
              quarterKey='quarter2'
              title='报告时间'
              onQuarterChange={(data) => {
                if (data.lackDate) {
                  message.warning('请选择季度');
                  console.log(data);
                }
              }}
            />
          </Col>
          <Col span={16}>
            <SecondHeaderC title='有默认值-年份选择需晚于2021' />
            <SimpleQuarterC
              form={this.formRef.current}
              // form={this.state.formData}
              // form={this.formRef}
              // form={this.props.form} // form对象
              dataIndex='select3' // Form识别的Item ID
              yearKey='year3'
              quarterKey='quarter3'
              title='报告时间'
              highCurrentDate={true}
              initialValueYear={'2022'}
              limitYear={'2021'}
              initialValueQuarter={'1'}
              onQuarterChange={(data) => {
                console.log(data);
              }}
              rules={[[{ required: true, message: '请选择年份' }], [{ required: true, message: '请选择季度' }]]}
            />
          </Col>
          {/* <Col span={16}> */}
          {/* <SimpleQuarterC
          a={1}
          form={this.state.formData}
          dataIndex='select3'
          onQuarterChange={(data) => {
            console.log(data);
          }}
          yearKey='year3'
          quarterKey='quarter3'
        /> */}
          {/* </Col> */}
        </Row>
      </Form>
    );
  }
}

export default SimpleQuarterCDemo;
